<template>
  <div class="action-list">
    <!-- <div class="action btn-share" @click="handleActionClick('share')">
      <i class="i-share" />
    </div> -->
    <div
      class="action btn-like"
      :class="{ active: _liked }"
      @click="handleActionClick('like')"
    >
      <span v-if="_likeCount > 0" class="act-num">{{ _likeCount }}</span>
      <i class="i-like" :class="{ active: _liked }" />
    </div>
    <div class="action btn-comment" @click="handleActionClick('comment')">
      <span v-if="commentCount > 0" class="act-num">{{ commentCount }}</span>
      <i class="i-comment" />
    </div>
    <div
      class="action btn-favorite"
      :class="{ active: _favorited }"
      @click="handleActionClick('favorite')"
    >
      <i class="i-favorite" :class="{ active: _favorited }" />
    </div>
    <div
      v-show="showTopAction"
      class="action"
      @click="handleActionClick('top')"
    >
      <i class="i-top" />
    </div>
  </div>
</template>

<script setup>
import throttle from "lodash.throttle";
const showTopAction = ref(false);
const emits = defineEmits(["handleClick"]);

const props = defineProps({
  parentEleId: {
    type: String,
    default: "",
  },
  entityType: {
    type: String,
    required: true,
  },
  entityId: {
    type: Number,
    required: true,
  },
  liked: {
    type: Boolean,
    default: false,
  },
  likeCount: {
    type: Number,
    default: 0,
  },
  commentCount: {
    type: Number,
    default: 0,
  },
  favorited: {
    type: Boolean,
    default: false,
  },
});

const _liked = ref(props.liked);
const _likeCount = ref(props.likeCount);
const _favorited = ref(props.favorited);

onMounted(() => {
  (document.getElementById(props.parentEleId) || window)?.addEventListener(
    "scroll",
    throttle(onPageScroll, 200)
  );
});

/**
 * 处理页面滚动事件
 */
const onPageScroll = () => {
  const element = document.getElementById(props.parentEleId);
  const winHeight = element?.clientHeight || window.innerHeight;
  const scrollTopVal = element
    ? element.scrollTop
    : window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
  showTopAction.value = scrollTopVal > winHeight / 2;
};

const handleActionClick = (action) => {
  if (action === "top") {
    useScrollToTop(500, props.parentEleId);
  } else if (action === "comment") {
    window.scrollTo(0, document.getElementById("JComment").offsetTop);
  } else if (action === "like") {
    handleLike();
  } else if (action === "favorite") {
    handleFavorite();
  } else {
    emits("handleClick", action);
  }
};

const handleLike = async () => {
  if (_liked.value) {
    try {
      await useHttpPostForm("/api/like/unlike", {
        body: {
          entityType: props.entityType,
          entityId: props.entityId,
        },
      });
    } catch (e) {
      console.log(e);
    }
    _liked.value = false;
    _likeCount.value = _likeCount.value > 0 ? _likeCount.value - 1 : 0;

    useMsgSuccess("已取消点赞");
  } else {
    try {
      await useHttpPostForm("/api/like/like", {
        body: {
          entityType: props.entityType,
          entityId: props.entityId,
        },
      });
    } catch (e) {
      console.log(e);
    }
    _liked.value = true;
    _likeCount.value++;

    useMsgSuccess("点赞成功");
  }
};

const handleFavorite = async () => {
  if (_favorited.value) {
    try {
      await useHttpPostForm("/api/favorite/delete", {
        body: {
          entityType: props.entityType,
          entityId: props.entityId,
        },
      });
    } catch (e) {
      console.log(e);
    }
    _favorited.value = false;

    useMsgSuccess("已取消收藏");
  } else {
    try {
      await useHttpPostForm("/api/favorite/add", {
        body: {
          entityType: props.entityType,
          entityId: props.entityId,
        },
      });
    } catch (e) {
      console.log(e);
    }
    _favorited.value = true;

    useMsgSuccess("收藏成功");
  }
};
</script>

<style lang="scss" scoped>
.action-list {
  .action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 0 16px;
    text-align: center;
    background: var(--bg-color);
    box-shadow: 0 4px 4px rgba(163, 172, 180, 0.13);
    cursor: pointer;
    transition: all 0.2s linear;
    user-select: none;

    &:hover {
      background: var(--bg-color4);
    }

    &.active {
      background: linear-gradient(336.45deg, #ff5543 42.98%, #ff7827 86.07%);
      box-shadow: 0 4px 4px rgba(255, 92, 63, 0.15);
    }

    i {
      width: 24px;
      height: 24px;
      background-size: 100% 100%;
      background-color: #fff;
      &.i-share {
        background: url()
          no-repeat 50%;
      }

      &.i-like {
        background: url()
          no-repeat 50%;
        &.active {
          background: url()
            no-repeat 50%;
        }
      }

      &.i-comment {
        background: url()
          no-repeat 50%;
      }

      &.i-favorite {
        background: url()
          no-repeat 50%;

        &.active {
          background: url()
            no-repeat 50%;
        }
      }

      &.i-top {
        width: 24px;
        height: 24px;
        background: url()
          no-repeat 50%;
        background-size: 100% 100%;
      }
    }

    .act-num {
      position: absolute;
      top: -4px;
      left: 24px;
      padding: 1px 5px;
      background: #ff5543;
      border-radius: 11px;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      color: #fff;
      white-space: nowrap;
      border: 1px solid #fff;
    }
  }
}
</style>
